<template>
	<view class="bottom-bar">
		<swiper circular @change="changePlay" :current="currentIndex" v-if="musicPlaylist.length > 0">
			<swiper-item class="swiper-item" v-for="item in musicPlaylist" :key="item.id">
				<image @click="toMusicPage(item.id, currentIndex)" :src="item.al.picUrl" lazy-load></image>
				<view class="swiper-item-name">
					<text class="song_name">{{item.name}}</text>
					<text>-</text>
					<text class="song_author">{{item.ar[0].name}}</text>
				</view>
				<view class="swiper-item-icon">
					<text class="iconfont big" :class="musicIsPlay" @click="pausePlay"></text>
					<text class="iconfont icon-caidan small" @click="showMenu"></text>
				</view>
			</swiper-item>
		</swiper>
		<view class="none" v-else>
			暂无音乐播放
		</view>
		<Menu @musicPlay="musicPlay" @showMenu="showMenu" :isShowMenu="isShowMenu"></Menu>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { getMusicUrl, getSongdetail } from "../../../api/index.js"
	import Menu from '../../../components/Menu/Menu.vue'
	// // 获取全局唯一的背景音频管理器[不支持H5]
	// // #ifndef H5
	// let musicPlay = uni.getBackgroundAudioManager()
	// // #endif
	// // #ifdef H5
	// let musicPlay = uni.createInnerAudioContext()
	// musicPlay.autoplay = true
	// // #endif
	export default {
		data() {
			return {
				// 获取本地缓存的歌单数据
				musicPlaylist: uni.getStorageSync("musicPlaylist") || [],
				currentIndex: uni.getStorageSync('curIndex') || 0,
				curSongLs: {},
				// 当前播放歌曲的总时长[毫秒]
				durationTime: 0,
				// 判断用户是向右滑上一首 还是向左滑下一首[防止音乐每权限url为null报错,不再播放]
				flag: false,
				// 是否显示菜单
				isShowMenu: false
			}
		},
		components: { Menu },
		computed:{
			...mapState(['isPlay', 'timer', 'isEnded']),
			musicIsPlay() {
				return this.isPlay? 'icon-zanting' : ' icon-icon-2'
			},
			// 设置音乐进度条的最大值	秒
			durationTimeSecond() {
				return Math.floor(this.durationTime / 1000)
			}
		},
		watch: {
			isEnded() {
				this.newMusicIndex('next')
			}
		},
		created() {
      // this.initData()
			this.musicPlaylist[this.currentIndex]?.id && this.getSongdetailFun(this.musicPlaylist[this.currentIndex]?.id)
		},
		methods: {
			// 优化，由于组件被缓存了，不会再次触发created与mounted，故得在父级页面或组件中初始化数据
			//  未优化前，解决办法是撤销和创建改组件v-if，这样会导致性能下降，页面会出现暂时性白屏不友好
			initData() {
				this.musicPlaylist = uni.getStorageSync("musicPlaylist")
				// 获取当前歌曲索引值[改变当前所在滑块的 index]
				this.currentIndex = uni.getStorageSync('curIndex')
				// 更新vuex中的当前播放音乐的索引值
				this.$store.commit('CURRENTINDEX', this.currentIndex)
			},
			// 获取歌曲详情[内含时长]的方法
			async getSongdetailFun(id) {
				const {data: {songs}} = await getSongdetail(id)
				// 获取当前播放的歌曲时长
				this.durationTime = songs[0].dt
				this.$store.commit('DURATIONTIMESECOND', this.durationTime)
			},
			async getMusicUrlFun(id) {
				// 当前播放的音乐url
				let curMusicUrl = ''
				const {data: {data: res}} = await getMusicUrl(id)
				this.curSongLs = res
				curMusicUrl = this.curSongLs[0].url
				// #ifndef H5
				// 不填不播放也不报错
				this.$musicPlay.title = this.musicPlaylist[this.currentIndex].name;
				// #endif
				// 监听播放的音乐url变化,实时更新当前播放的音乐
				if (curMusicUrl == null) {
					uni.showToast({
						title: '抱歉, 暂时无法播放哦!',
						icon: 'error',
						mask: true,
						duration: 1000
					})
					// 自动切换下一首/上一首
					this.flag?this.newMusicIndex('pre') : this.newMusicIndex('next')
				} else {
					// 有值则赋值播放
					this.$musicPlay.src = curMusicUrl
				}
			},
			async newMusicIndex(type) {
				// 重置音乐已播时长
				this.$store.commit('RESETTIME')
				const curIndex = await this.$store.dispatch('changeCurrentIndex', { type },)
				// 1. 更新播放歌曲的obj
				// 2. 实时更新data数据对象中的 当前索引值
				// 3.根据最新的索引值获取最新的歌曲id,获取最新的歌曲数据进行播放
				this.curMusic = this.musicPlaylist[curIndex]
				this.currentIndex = curIndex
				const id = this.curMusic.id
				this.getMusicUrlFun(id)
				this.getSongdetailFun(id)
			},
			changePlay(e) {
				/**
				 *  change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：
					 * autoplay 自动播放导致swiper变化。
					 * touch 用户划动引起swiper变化。
					 * 其他原因将用空字符串表示。[我这是由于用户在其他页面切换歌单或歌曲导致] 
				 * */
				const source = e.detail.source
				if (source === '') return
				// 参数 e: 有swiper的current等最新属性值
				const index = e.detail.current
				this.musicPlay(index)
			},
			// 实现音乐播放的逻辑
			musicPlay(curIndex) {
				// 重置音乐已播时长
				this.$store.commit('RESETTIME')
				const index = curIndex
				// 先停止上一个音乐的播放
				clearInterval(this.timer)
				if (!this.isPlay) {
					// 更新vuex中的是否播放数据
					this.$store.commit('PLAYPUASE', true)
				}
				// 这里解决url为空自动播放下一曲
				// 假设 musicPlaylist长度为10,musicPlaylist-1 = 9
				// 情况1: 当用户向左滑,下一曲时,有一种情况是最新的swiper当前项索引值index为0,currentIndex值为9,0 < 9,flag按 else 来为true,是上一曲,故在index=0时,把flag改为false,下一曲
				// 情况2: 当用户向右滑,上一曲时,有一种情况是最新的swiper当前项索引值index为9,currentIndex值为0,9 > 0,flag按 else 来为false,是下一曲,故在else if时,把flag改为true,上一曲
				if (index == 0) {
					this.flag = false
				} else if(index === 0 && this.currentIndex === this.musicPlaylist.length - 1) {
					this.flag = true
				} else {
					this.flag = index >= this.currentIndex ? false : true
				}
				this.currentIndex = index
				// 更新vuex中的当前播放音乐的索引值
				this.$store.commit('CURRENTINDEX', this.currentIndex)
				// 把最新的当前索引存入本地
				uni.setStorageSync('curIndex', index)
				// 获取url
				this.getMusicUrlFun(this.musicPlaylist[index].id)
			},
			// 显示菜单
			showMenu() {
				this.isShowMenu = !this.isShowMenu
			},
			// 暂停或播放音乐
			pausePlay() {
				if (this.isPlay) {
					this.$musicPlay.pause()
				} else {
					// 设置音频播放的位置等于上一次停止的位置
					this.$musicPlay.startTime = this.$musicPlay.currentTime
					this.$musicPlay.play()
					// 获取url
					const id = this.musicPlaylist[this.currentIndex].id
					this.getMusicUrlFun(id)
				}
				this.$store.commit('PLAYPUASE', !this.isPlay)
			},
			async toMusicPage(smallId, cur_index) {
				uni.navigateTo({
					url: `/pages/musicplayer/musicplayer?id=${smallId}&cur_index=${cur_index}&flag=0`
					// url: '/pages/musicplayer/musicplayer?id=' + smallId + '&playListId=' + bigId + '&cur_index=' + cur_index
				 });
				// const {data: {playlist: item}} = await getMusicDetail(bigId)
				// 更新store中的播放列表
				// this.$store.dispatch('changeMusicPlaylist', item.tracks)
				// 更新当前store中的播放音乐索引值
				// this.$store.commit('CURRENTINDEX', this.currentIndex)
			}
		}
	}
</script>

<style lang="scss">
	.bottom-bar {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 999;
		background-color: #e9e9e9;
		.none {
			line-height: 100rpx;
			text-align: center;
			color: #4a4a4a;
		}
		swiper {
			height: 100%;
			width: 100%;
			.swiper-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				image {
					width: 80rpx;
					height: 80rpx;
					margin-left: 20rpx;
					border-radius: 10rpx;
					// display:flex布局，防止图片被压缩flex-shrink: 0
					flex-shrink: 0;/*防止被压缩*/
          /* #ifdef APP-PLUS */
          background: url('@/static/images/song/default.png') no-repeat center center;
          background-size: cover;
          /* #endif */
				}
				.swiper-item-name {
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 32rpx;
					color: #404040;
					overflow: hidden;
					margin: 0 20rpx;
				}
				.swiper-item-icon {
					.big {
						font-size: 66rpx;
					}
					.small {
						font-size: 50rpx;
						margin: 0 20rpx;
					}
				}
			}
		}
	}
</style>
